<template>
  <!-- 左侧抽屉 -->
  <el-drawer :visible="housreDialog" size="55%" :title="showTxt" :wrapper-closable="false" @close="closeDrawer">
    <el-form ref="drawerForm" :inline="true" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="所属小区" prop="community_code">
        <el-select v-model="form.community_code" placeholder="请选择">
          <el-option v-for="item in getSelectHome" :key="item.id" :label="item.name" :value="item.code" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属名称" prop="name">
        <el-input v-model="form.name" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="电梯数" prop="lift">
        <el-input-number v-model="form.lift" controls-position="right" :min="1" />
      </el-form-item>
      <el-form-item label="总户数" prop="house">
        <el-input-number v-model="form.house" controls-position="right" :min="1" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="form.desc" placeholder="请输入" type="textarea" />
      </el-form-item>
      <div class="Box">
        <el-button size="small" @click="closeDrawer">取消</el-button>
        <el-button type="primary" size="small" @click="submitData">确认</el-button>
      </div>
    </el-form>

  </el-drawer>
</template>

<script>
import { getSelectHomeApi, NewBuildingAPI, communityParticularsAPI, modifyDataAPI } from '@/api/LouDong'
export default {
  props: {
    housreDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        id: null,
        // 小区编码
        community_code: '',
        // 描述
        desc: '',
        // 总户数
        house: '',
        // 电梯数
        lift: '',
        // 所属名称  楼栋名称
        name: ''
      },
      rules: {
        community_code: [{ required: true, message: '小区名称不可为空', trigger: 'blur' }],
        desc: [{ required: true, message: '小区名称不可为空', trigger: 'blur' }],
        house: [{ required: true, message: '小区名称不可为空', trigger: 'blur' }],
        lift: [{ required: true, message: '小区名称不可为空', trigger: 'blur' }],
        name: [{ required: true, message: '小区名称不可为空', trigger: 'blur' }]
      },
      getSelectHome: []
    }
  },
  computed: {
    showTxt() {
      return this.form.id ? '编辑小区' : '新增小区'
    }
  },
  created() {
    this.getSelectHomes()
  },
  methods: {
    // 关闭弹窗
    closeDrawer() {
      this.$emit('update:housreDialog', false)
      this.$refs.drawerForm.resetFields()
    },
    // 获取所有小区名称
    async getSelectHomes() {
      const res = await getSelectHomeApi(this.datas)
      this.getSelectHome = res.data
      // console.log(this.getSelectHome)
    },
    // 点击确认
    submitData() {
      this.$refs.drawerForm.validate(async vali => {
        if (!vali) return
        if (this.form.id) {
          await modifyDataAPI(this.form)
          this.$message.success('编辑成功')
        } else {
        // 上传
          await NewBuildingAPI(this.form)
          // console.log(res)
          this.$message.success('添加成功')
        }
        // 关闭弹窗
        this.closeDrawer()
        // 刷新数据
        this.$parent.BuildingInformation()
      })
    },
    // 数据回显
    async communityParticulars(id) {
      // 获取数据
      const { data } = await communityParticularsAPI(id)
      this.form = data
    }

  }
}
</script>

<style lang="scss" scoped>
.el-form{
    margin: 0 20px;
  }
    // padding: 0 5px;
    .el-form-item{
      span{
        font-weight: 800;
      }
      .el-input,.el-input-number{
        display: block;
        width: 440px;
        height: 40px
      }
      ::v-deep .el-textarea {
        display: block;
        width: 440px;
      }
      ::v-deep .el-input--suffix .el-input__inner{
        width: 440px;
      }
      // .el-input,.el-input-number:nth-child(odd){
      //   margin-right: 1px;
      // }
    }
    .Box{
      margin-left: 80px;
    }

  .but-rigth{
      float: right;
    }
  ::v-deep .el-input-number .el-input__inner{
    text-align: left;
  }

  span{
    font-weight: 800;
  }
  .formItem{
    margin-right: 0;
    margin-left: 200px;
  }
  .but{
    margin-top: 50px;
  }
  ::v-deep .ql-toolbar.ql-snow + .ql-container.ql-snow{
    height: 200px;
  }
  ::v-deep .el-upload--picture-card{
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
</style>
